<template>
    <div>
        <!-- MD5 加密例子 -->
        <el-row :gutter="16">
            <el-col :offset="6" :span="12">
                <el-input size="small" v-model="inputValue" placeholder=""></el-input>
            </el-col>
            <el-col :span="6">
                <el-button size="small" type="primary" @click="transMD5">生成MD5</el-button>
            </el-col>
            <el-col :offset="6" :span="12">
                <el-input size="small" v-model="resultValue" readonly placeholder=""></el-input>
            </el-col>
        </el-row>
        
        <!-- AES 对称加密解密方法 -->
        <el-row :gutter="16">
            <el-col :offset="6" :span="12">
                <el-input size="small" v-model="aesIptValue" placeholder=""></el-input>
            </el-col>
            <el-col :span="6">
                <el-button size="small" type="primary" @click="transAES('en', $event)">加密AES</el-button>
                <el-button size="small" type="success" @click="transAES('de', $event)">解密AES</el-button>
            </el-col>
            <el-col :offset="6" :span="6">
                <el-input size="small" v-model="aesENRes" readonly placeholder=""></el-input>
            </el-col>
            <el-col :span="6">
                <el-input size="small" v-model="aesDERes" readonly placeholder=""></el-input>
            </el-col>
        </el-row>

        <!-- vuex 使用方法 -->
        <el-row :gutter="16">
            <el-col :offset="6" :span="12">
                <el-input size="small" v-model="aesVuexValue" placeholder=""></el-input>
            </el-col>
            <el-col :span="6">
                <el-button size="small" type="primary" @click="commitVuex">提交到vuex</el-button>
            </el-col>
            <el-col :offset="6" :span="12">
                <el-input size="small" v-model="aesVuexResult" readonly placeholder=""></el-input>
            </el-col>
        </el-row>

        <!-- 复选框 -->
        <el-row :gutter="16">
            <el-col :offset="6" :span="12">
                <el-checkbox v-model="rememberPwd">记住密码？</el-checkbox>
            </el-col>
        </el-row>
        
    </div>
</template>

<script>
    import CryptoJS from "crypto-js";

    export default {
        computed: {
            /** 获取vuex 中的用户信息 */
            aesVuexResult() {
                return this.$store.getters['common/getUserInfo'];
            }
        },
        data() {
            return {
                inputValue: '',     // MD5 加密输入参数
                resultValue: '',    // MD5 加密后输出值
                aesIptValue: '',    // AES 加密输入值
                aesENRes: '',       // AES 加密后输出值
                aesDERes: '',       // AES 解密后输出值
                aesVuexValue: '',   // vuex 存储信息
                rememberPwd: false  // 复选框
            }
        },
        methods: {
            /** MD5 加密方法 */
            transMD5() {
                this.resultValue = CryptoJS.MD5(this.inputValue).toString();
            },
            /** AES 加/解密方法 */
            transAES(type, evt) {
                console.log('原生事件对象输出：', evt);
                
                if (type === 'en') {
                    if (this.aesIptValue.trim() === '') {
                        this.$message.warning('请输入需要加密的字符串或对象');
                        return;
                    }

                    console.log('============= 开始加密');
                    this.aesENRes = CryptoJS.AES.encrypt(this.aesIptValue, 'ABCDEF').toString();
                } else {

                    let load = this.$loading();
                    this.aesDERes = CryptoJS.AES.decrypt(this.aesENRes, 'ABCDEF').toString(CryptoJS.enc.Utf8);
                    setTimeout(() => {
                        load.close();
                    }, 600);
                }
            },
            /** 提交数据到vuex */
            commitVuex() {
                this.$store.dispatch('common/setUserInfo', this.aesVuexValue);
            }
        }
    }
</script>